<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2022/1/27
  Time: 20:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户头像详情</title>
    <script src="../../js/jquery.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/manager_page/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>

    <style type="text/css">
        #user_head_img_div{
            position: absolute;
            width: fit-content;
            height: fit-content;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<input type="hidden" id="user_head_img_hidden" value=${param.user_head_img_hidden} >
<input type="hidden" id="flag_edit" value="no">
<%--<input type="hidden" id="user_head_img_change" value=${param.user_head_img_hidden} >--%>
<div id="user_head_img_div">
    <img id="user_head_img"  />
    <br><br>
    <button type="button" class="layui-btn" id="upload_btn" style="width: 100%;">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
</div>
</body>
<script>
    var w=$(window).width()*0.85;
    var h=$(window).height()*0.85;
    $("#user_head_img").attr({
        "width":w,
        "height":h,
        "src":$("#user_head_img_hidden").val()
    })

    var layer;
    var flag_choose=false;
    layui.use('layer',function (){
        layer=layui.layer;
    })

    layui.use('upload',function (){
        var upload=layui.upload;

        upload.render({
            elem:'#user_head_img'
            ,url:'${pageContext.request.contextPath}/front_user/change_user_img.do'
            ,accept:"images"
            ,acceptMiMe:"images/*"
            ,auto:false
            ,bindAction:'#upload_btn'
            ,choose:function (obj){
                flag_choose=true;
                obj.preview(function (index,file,result){
                    $("#user_head_img").attr("src",result);
                })
            }
            ,done:function (res,index,upload){
                $("#flag_edit").val("yes");
                // $("#user_head_img_change").val(res.data);
                layer.msg("您的头像已修改");
            }
            ,error:function (index,upload){
                layer.msg("修改失败，请重新选择图片");
            }
        })
    })
    $("#upload_btn").click(function (){
        if(!flag_choose){
            layer.msg("您还没有选择图片，点击图片上传图片");
        }
    })

</script>
</html>
